<template>
    <div class="layout zw-common-scrollbar">
        <div class="storeType">
            <div
                v-for="item in storeTypeList"
                :key="item.id"
                class="typeItem"
                :class="[item.is_open == 0 ? 'disable' : 'able']"
                @click="toAddStore(item)">
                <el-tooltip v-if="item.is_open == 0" :visible="visibleTooltip" placement="top" effect="light">
                    <template #content>
                        <span class="tipText">暂未开通，请跳转至</span>
                        <br />
                        <span class="tipText">
                            <span class="link" style="color: #ffae17; cursor: pointer" @click="toAppStore">
                                应用市场
                            </span>
                            添加应用
                        </span>
                    </template>
                    <img style="width: 70px; height: 70px" :src="item.logo" alt="" />
                </el-tooltip>
                <img v-else :src="item.logo" alt="" />
                <span>{{ item.name }}</span>
            </div>
        </div>
    </div>
</template>
<script setup lang="tsx">
import { reactive, ref, onMounted, computed, watch } from 'vue';
import router from '@/router';

import { getStoreSourceList } from '@/api/ecommerce/storeManage';

const visibleTooltip = ref<boolean>(false);

const margin = ref<string>('');
const margin2 = ref<string>('');
const margin3 = ref<string>('');

const storeTypeList = reactive<any>([]); // 1 客易达   2 有赞   3 淘宝   4 自营   5 线下门店   6 天猫   7 抖店   8 京东  9 视频号小店  10 快手
const emit = defineEmits(['select']);

const toAddStore = (item: any): void => {
    let path = '';
    const { id, is_open } = item;
    // 1 客易达   2 有赞   3 淘宝   4 自营   5 线下门店   6 天猫   7 抖店   8 京东   9 视频号小店 10 快手小店
    switch (id) {
        case 1:
            path = 'addKeyidaStore';
            break;
        case 2:
            path = 'addYouzanStore';
            break;
        case 3:
            path = 'addTaoBaoStore';
            break;
        case 4:
            path = 'addSelfStore';
            break;
        case 5:
            path = 'addOfflineStore';
            break;
        case 6:
            path = 'addTmallStore';
            break;
        case 7:
            path = 'addDouYinStore';
            break;
        case 9:
            path = 'addVideoNumberStore';
            break;
        case 10:
            path = 'addKuaiShouStore';
            break;
    }
    if (is_open == 1) {
        // 0 未开通  1 已开通
        emit('select', true);
        router.push(`/ecommerce/storeManage/list/${path}?source=${id}`);
    }
};

const toAppStore = () => {
    visibleTooltip.value = false;
    emit('select', true);
    router.push(`/appmarket/appmarket`);
};

onMounted(async () => {
    const sourceList = formatSourceList(await getStoreSourceList({}));
    storeTypeList.splice(0);
    storeTypeList.push(...sourceList);

    // storeTypeList.splice(7)
});

const formatSourceList = (arr: any): any => {
    const newArr: any = [];
    arr.forEach((item: any) => {
        const { is_open } = item;
        switch (is_open) {
            case 0:
                newArr.push(item);
                break;
            case 1:
                newArr.unshift(item);
                break;
        }
    });
    return newArr;
};

watch(
    () => storeTypeList,
    (val: any) => {
        switch (val?.length) {
            case 1:
                margin.value = '0';
                margin2.value = '0';
                margin3.value = '0';
                break;
            case 2:
                margin.value = '55px';
                margin2.value = '0';
                margin3.value = '0';
                break;
            case 3:
                margin.value = '55px';
                margin2.value = '55px';
                margin3.value = '0';
                break;
            default:
                margin.value = '55px';
                margin2.value = '55px';
                margin3.value = '0';
                break;
        }
    },
    { deep: true, immediate: true }
);
</script>
<style scoped lang="scss">
.layout {
    width: 100%;
    max-height: 460px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    .storeType {
        display: grid;
        grid-template-columns: repeat(3, auto);
        padding: 38px 30px 0;
        box-sizing: border-box;
        .typeItem {
            width: 128px;
            height: 128px;
            background: #ffffff;
            margin-right: v-bind(margin);
            margin-bottom: 46px;
            border-radius: 4px;
            box-shadow: 0px 2px 14px 0px #eaeaea;
            border: 1px solid #eaeaea;
            &:nth-of-type(2n) {
                margin-right: v-bind(margin2);
            }
            &:nth-of-type(3n) {
                margin-right: v-bind(margin3);
            }
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            img {
                width: 70px;
                height: 70px;
            }
            span {
                margin-top: 10px;
            }

            :deep .tipText {
                .link {
                    color: #ffae17;
                }
            }
        }
        .able {
            &:hover {
                cursor: pointer;
                border: 1px solid #ff6b00;
                background-color: #f9f9f9;
            }
        }
        .disable {
            &:hover {
                cursor: not-allowed;
            }
        }
    }
}
</style>
